<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性和属性节点是什么</title>
    <script src="../../js/jquery-3.4.1.js"></script>
</head>
<body>
<span name="span666">2323</span>
<span>9999</span>
<span class="box" name="remove">9999</span>
</body>
<script>

    $(() => {
        propertySetAndGet();
        attributeSetAndGet();
        removeAttribute();
    });

    /**
     * 功能:
     *      获取和操作类的属性的两种方式.
     * 说明:
     *      1. 获取可以通过`类名.属性名`和`类名['属性名']`这两种方式获取;
     *      2. 赋值只需要用等号赋值即可, 也就是说没有等号赋值为获取, 有等号赋值为修改.
     *      3. 可以发现, 这个属性就和java中的类的字段是一个意思.
     */
    function propertySetAndGet() {
        let person = new Person();
        person.name = '小王';
        console.log(person.name);

        person['name'] = '大王';
        console.log(person['name']);
    }

    /**
     * 功能:
     *      获取和设置dom元素的属性节点;
     * 说明:
     *      1. 使用原生js修改可以使用getAttribute方法来获取属性节点; 使用setAttribute来修改属性节点;
     *      2. 使用jquery可以使用attr方法来修改和获取dom元素的属性节点:
     *          - attr方法可以有1个或者2个参数:
     *              1. 一个参数时: 表示获取这个属性节点的值;
     *                  - 需要注意的是: 即使选择器选择出了多个节点, 这个方法也只会默认返回第一个节点的属性节点的字号, 屏蔽其他元素.
     *              2. 两个参数时: 表示设置这个属性节点的值.
     *                  - 需要注意的是: 在获取时只会获取出第一个元素的属性节点的值, 但是在设置时会直接设置所有获取到的节点的属性节点的值.
     *                  - 如果设置的属性节点不存在, 就会给这个dom元素新增一个属性节点.
     *          - 需要注意的是: $("span")获取到的对象为多个时不可以使用$("span")[0]这样期望只修改一个节点的内容, 因为attr方法是
     *          jquert封装dom元素的对象的方法, 如果使用$("span")[0]这种方式进行获取后, 获取到的是dom元素, dom元素是没有这个方法的,
     *          但是有dom元素的原生js的getAttribute方法和setAttribute方法.
     * 注意:
     *      1. 属性和属性节点的不同:
     *          - 属性是每对象都有的;
     *          - 但是属性节点时dom元素独有的, 在dom元素的attributes属性下保存着, 是一个伪数组.
     */
    function attributeSetAndGet() {
        //获取到的是一个伪数组, 所以需要取出第0个元素.
        const span = document.getElementsByTagName("span")[0];
        let spanName = span.getAttribute("name");
        console.log(spanName);

        span.setAttribute("name", "shezhihou");
        spanName = span.getAttribute("name");
        console.log(spanName);

        const span1 = $("span");
        span1[1].setAttribute("name", "从jquery封装对象中获取dom元素");
        console.log("从jquery封装对象中获取dom元素并修改后: ", $("span:contains('9999')").attr("name"));
        span1.attr("name", "jquery");
        console.log(span1.attr("name"));
    }

    /**
     * 功能:
     *      删除指定元素的指定名称的属性节点.
     * 说明:
     *      1. 这个方法一般不常用, 但是需要知道有这个方法.
     *      2. 会删除素有找到的节点的属性节点.
     *      3. 如果要删除多个属性节点的时候, 直接将参数中的字符串以空格隔开即可.
     */
    function removeAttribute() {
        const span = $(".box");
        span.remove("name class");
        console.log(span[0]);
    }

    class Person {
        constructor(name) {
            this.name = name;
        }
    }

</script>
</html>